<template>
	<view class="after-sale-list-container page-container">
		<!-- 状态筛选 -->
		<view class="status-tabs">
			<view class="tab-item" v-for="(tab, index) in statusTabs" :key="index"
				:class="{ active: activeTab === index }" @click="switchTab(index)">
				<text class="tab-text">{{ tab.name }}</text>
			</view>
		</view>

		<!-- 售后列表 -->
		<view class="after-sale-list">
			<view class="after-sale-card" v-for="(item, index) in displayList" :key="item.id"
				@click="toAfterSaleDetail(item)">
				<!-- 售后头部 -->
				<view class="after-sale-header">
					<view class="after-sale-info">
						<text class="after-sale-no">售后单号：{{ item.after_sale_sn }}</text>
						<text class="after-sale-date">申请时间：{{ item.apply_time }}</text>
					</view>
					<view class="after-sale-status" :class="'status-' + getStatusText(item.after_sale_status)">
						{{ item.after_sale_status_desc }}
					</view>
				</view>

				<!-- 商品信息 -->
				<view v-for="skuitem in item.sku_info" :key="skuitem.id" class="product-info">
					<image :src="$tools.buildUrl(skuitem.main_image)" mode="aspectFill" class="product-image"></image>
					<view class="product-detail">
						<text class="product-name">{{ skuitem.spu_name }}</text>
						<text class="product-spec">{{ skuitem.sku_name }}</text>
						<text class="after-sale-type">{{ getTypeTitle(item.after_sale_type) }}</text>
					</view>
					<view class="after-sale-amount">
						<text class="amount-text">¥{{ skuitem.total_amount }}</text>
						<text class="amount-text"
							style="font-size: 24rpx; margin-left: 8px;">共{{ skuitem.quantity }}件</text>
					</view>
				</view>

				<!-- 售后原因 -->
				<view class="after-sale-reason">
					<text class="reason-label">售后原因：</text>
					<text class="reason-text">{{ item.reason }}</text>
				</view>

				<!-- 操作按钮 -->
				<view class="after-sale-actions">
					<button class="action-btn cancel-btn" v-if="item.after_sale_status === 0"
						@click.stop="cancelAfterSale(item)">
						撤销申请
					</button>
					<button class="action-btn cancel-btn" v-if="item.after_sale_status === 3"
						@click.stop="toAfterSaleDetail(item)">
						立即退货
					</button>
					<button class="action-btn detail-btn" @click.stop="toAfterSaleDetail(item)">
						查看详情
					</button>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="displayList.length === 0">
			<image src="@/static/images/empty-after-sale.png" mode="aspectFit" class="empty-image"></image>
			<text class="empty-text">{{ getEmptyText() }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 0,
				statusTabs: [{
						name: '全部',
						status: 0
					},
					{
						name: '审核中',
						status: 1
					},
					{
						name: '已通过',
						status: 2
					},
					{
						name: '未通过',
						status: 3
					},
					{
						name: '已完成',
						status: 4
					},
					{
						name: '已取消',
						status: 5
					}
				],
				hasSearched: false,
				recordCount: 0,
				page: 1,
				limit: 10,
				displayList: [] // 当前显示的列表
			}
		},
		onLoad() {
			this.onSearch()
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {
			if (!this.hasSearched) {
				this.page = 1
				this.recordCount = 0
				this.displayList = []
				this.filterList()
			}
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			// 下拉触底，先判断是否有请求正在进行中
			// 以及检查当前请求页数是不是小于数据总页数，如符合条件，则发送请求
			const page = this.page
			const limit = this.limit
			const recordCount = this.recordCount
			if (!this.hasSearched && page * limit < recordCount) {
				this.page++
				setTimeout(() => {
					this.filterList()
				}, 500)
			}
		},
		methods: {
			// 切换状态标签
			switchTab(index) {
				this.activeTab = index
				this.onSearch()
			},

			// 过滤列表数据
			filterList() {
				if (this.hasSearched) {
					return false
				}

				this.hasSearched = true
				const currentStatus = this.activeTab >= 0 ? this.statusTabs[this.activeTab].status : 0;
				this.$api.order.GetAfterSalesList({
					page: this.page,
					limit: this.limit,
					status: currentStatus
				}).then(res => {
					this.hasSearched = false
					this.recordCount = res.count
					res.data.forEach(item => {
						item.sku_info = this.$tools.parseJsonObject(item.sku_info);
						item.evidence = this.$tools.parseJsonObject(item.evidence);
					})
					this.displayList = this.displayList.concat(res.data)
				}).catch(err => {
					this.hasSearched = false
					if (this.page > 0) {
						this.page--
					}
				})
			},

			// 搜索事件处理
			onSearch() {
				this.page = 1
				this.recordCount = 0
				this.displayList = []
				this.filterList()
			},

			// 获取售后类型
			getTypeTitle(type) {
				const titleMap = {
					1: '退货',
					2: '换货',
					3: '仅退款',
					4: '补寄'
				}
				return titleMap[type] || '未知'
			},

			// 获取状态标识
			getStatusText(status) {
				const statusMap = {
					0: 'pending',
					1: 'approved',
					2: 'rejected',
					3: 'pending',
					4: 'pending',
					5: 'pending',
					6: 'pending',
					7: 'pending',
					8: 'pending',
					9: 'completed',
					10: 'completed',
					11: 'completed'
				}
				return statusMap[status] || 'pending'
			},

			// 获取空状态文字
			getEmptyText() {
				const textMap = {
					0: '暂无售后申请',
					1: '暂无审核中的售后',
					2: '暂无已通过的售后',
					3: '暂无未通过的售后',
					4: '暂无已完成的售后',
					5: '暂无已取消的售后'
				}
				return textMap[this.activeTab] || '暂无售后申请'
			},

			// 撤销售后申请
			cancelAfterSale(item) {
				uni.showModal({
					title: '撤销申请',
					content: '确定要撤销这个售后申请吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '处理中...'
							})

							this.$api.order.CancelAfterSales({
								after_sales_id: item.id
							}).then(res => {
								uni.hideLoading()
								uni.showToast({
									title: res.msg,
									icon: 'success'
								})
								item.after_sale_status = 11
								item.after_sale_status_desc = '已取消'

								// 从列表中移除
								// const index = this.displayList.findIndex(sale => sale.id === item.id)
								// if (index > -1) {
								// 	this.displayList.splice(index, 1)
								// }
							})
						}
					}
				})
			},

			// 跳转到售后详情
			toAfterSaleDetail(item) {
				uni.navigateTo({
					url: `/pages/after-sale/detail?id=${item.id}`
				})
			},

			// 更新打单状态
			setOrderStatus(id, status, desc) {
				let item = this.displayList.find(item => item.id === id)
				if (item) {
					item.after_sale_status = status
					item.after_sale_status_desc = desc
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.after-sale-list-container {
		background-color: #f8f9fa;
	}

	/* 状态标签 */
	.status-tabs {
		display: flex;
		background: white;
		padding: 0 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.tab-item {
		flex: 1;
		padding: 30rpx 0;
		text-align: center;
		position: relative;
	}

	.tab-item.active .tab-text {
		color: #52a58a;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background-color: #52a58a;
		border-radius: 2rpx;
	}

	.tab-text {
		font-size: 28rpx;
		color: #666;
	}

	/* 售后列表 */
	.after-sale-list {
		padding: 20rpx;
	}

	.after-sale-card {
		background: white;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	/* 售后头部 */
	.after-sale-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.after-sale-info {
		flex: 1;
	}

	.after-sale-no,
	.after-sale-date {
		display: block;
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.after-sale-status {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: bold;
	}

	.after-sale-status.status-pending {
		background-color: #fff3cd;
		color: #856404;
	}

	.after-sale-status.status-approved {
		background-color: #d4edda;
		color: #155724;
	}

	.after-sale-status.status-rejected {
		background-color: #f8d7da;
		color: #721c24;
	}

	.after-sale-status.status-completed {
		background-color: #d1ecf1;
		color: #0c5460;
	}

	/* 商品信息 */
	.product-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.product-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
	}

	.product-detail {
		flex: 1;
	}

	.product-name {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		display: block;
		margin-bottom: 8rpx;
	}

	.product-spec {
		font-size: 24rpx;
		color: #999;
		display: block;
		margin-bottom: 8rpx;
	}

	.after-sale-type {
		font-size: 24rpx;
		color: #52a58a;
		background-color: #f0f8f5;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
		display: inline-block;
	}

	.after-sale-amount {
		text-align: right;
	}

	.amount-text {
		font-size: 32rpx;
		color: #52a58a;
		font-weight: bold;
	}

	/* 售后原因 */
	.after-sale-reason {
		margin-bottom: 20rpx;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
	}

	.reason-label {
		font-size: 24rpx;
		color: #666;
	}

	.reason-text {
		font-size: 26rpx;
		color: #333;
	}

	/* 操作按钮 */
	.after-sale-actions {
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
	}

	.action-btn {
		padding: 0rpx 32rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		border: none;
	}

	.cancel-btn {
		background-color: #f8f9fa;
		color: #666;
		border: 1rpx solid #e5e5e5;
	}

	.detail-btn {
		background-color: #52a58a;
		color: white;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 30rpx;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
</style>